<template>
  <div id="wrapper">
    <Navigator></Navigator>
    <div class="intro">
      <h3>单体公寓</h3>
      <p>海量公寓房源，质优好房专业服务全新呈现</p>
    </div>
    <div class="apartment">
      <ul>
        <li class="i1"></li>
        <li class="i2"></li>
        <li class="i3"></li>
        <li class="i4"></li>
      </ul>
    </div>
    <div id="mapOutter">
      <B-map></B-map>
    </div>
    <NewHouse></NewHouse>
    <NewAndSecondEchart></NewAndSecondEchart>
    <SecondHouse></SecondHouse>
    <HouseMarketAlerts></HouseMarketAlerts>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
  export default {
    components: {
      'B-map': require('@/components/Map/index.vue'),
      Navigator: require('@/components/Navigator.vue'),
      NewHouse: require('@/components/Home/NewHouse/index.vue'),
      NewAndSecondEchart: require('@/components/Home/NewAndSecondEchart/index.vue'),
      SecondHouse: require('@/components/Home/SecondHouse/index.vue'),
      HouseMarketAlerts: require('@/components/Home/HouseMarketAlerts/index.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        value2: 0
      }
    }
  }
</script>

<style lang="less">
  #wrapper {
    background: #3d3936 url("http://otsf23jmy.bkt.clouddn.com/pcindex_bg.jpg") no-repeat;
    .intro {

    }
    .intro h3 {
      text-align: center;
      color: #fff;
      font-size: 48px;
      font-weight: 200;
      margin-top: 100px;
    }

    .intro p {
      width: 660px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      letter-spacing: -1px;
      padding: 0 20px 0;
      margin: 20px auto;
      line-height: 1px;
      border-left: 150px solid #ddd;
      border-right: 150px solid #ddd;
    }

    .apartment {
      margin: 70px auto 0 auto;
      padding-bottom: 3em;
    }

    #mapOutter {
      width: 800px;
      height: 400px;
      background: white;
      margin: 0 auto;
    }

    .apartment ul {
      display: flex;
      padding: 0;
      height: auto;
      justify-content: center;
      li {
        width: 145px;
        height: 230px;
        margin: 0 40px;
        box-sizing: content-box;
        transition: all 0.5s;
      }
      .i1 {
        background: url('~@/assets/home/icon.png') no-repeat 0 0;
      }

      .i2 {
        background: url('~@/assets/home/icon.png') no-repeat -157px 0;
      }

      .i3 {
        background: url('~@/assets/home/icon.png') no-repeat -313px 0;
      }

      .i4 {
        background: url('~@/assets/home/icon.png') no-repeat -470px 0;
      }

      .i1:hover {
        background-position: 0 -240px;
      }

      .i2:hover {
        background-position: -157px -240px;
      }

      .i3:hover {
        background-position: -313px -240px;
      }

      .i4:hover {
        background-position: -470px -240px;
      }
    }
  }

</style>
